<!-- 交管部门路况信息【审核用户上报的事故信息】 -->
<template>
  <div
    @click="
      () => {
        isDialogVisible = true;
      }
    "
  >
    添加审核通过事件
  </div>
  <!-- 创建对话框 -->
  <el-dialog
    v-model="isDialogVisible"
    width="800"
    title="路况信息"
    draggable
    :modal="false"
    append-to-body
    :destroy-on-close="true"
    @close="onCancel"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick">
      <el-tab-pane label="待审核" name="0">
        <msg-table
          :tableData="tableData0"
          thekey="0"
          @changeTab="changeTab"
        ></msg-table>
      </el-tab-pane>
      <el-tab-pane label="已通过" name="1">
        <msg-table
          :tableData="tableData1"
          thekey="1"
          @changeTab="changeTab"
        ></msg-table>
      </el-tab-pane>
      <el-tab-pane label="已忽略" name="2">
        <msg-table
          :tableData="tableData2"
          thekey="2"
          @changeTab="changeTab"
        ></msg-table>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onSure"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import MsgTable from "../EventMsg/MsgTable.vue";
import { usePiniaStore } from "../../../../../stores/pinia.js";
import { storeToRefs } from "pinia";
const piniaStore = usePiniaStore();
const { userReportData } = storeToRefs(piniaStore);
const activeName = ref("1"); // 012
const isDialogVisible = ref(false);

let $map = null;
onMounted(() => {
  $map = inject("$map");
});

const tabClick = (tab, event) => {
  // console.log(tab, event);
};
// 改变审核状态时的changeTab函数
const changeTab = (response) => {
  activeName.value = response;
};
const tableData0 = computed(() => {
  const res = userReportData.value.filter((item) => {
    return item.response === "0";
  });
  // console.log(res);
  return res;
});
const tableData1 = computed(() => {
  const res = userReportData.value.filter((item) => {
    return item.response === "1";
  });
  // console.log(res);
  return res;
});
const tableData2 = computed(() => {
  const res = userReportData.value.filter((item) => {
    return item.response === "2";
  });
  // console.log(res);
  return res;
});
// 关闭
const onCancel = () => {
  isDialogVisible.value = false;
  // 复位
  $map.getView().animate({
    center: [114.3694, 30.49],
    zoom: 13,
    duration: 1000,
  });
};
// 确认
const onSure = () => {
  isDialogVisible.value = false;
  // 复位
  $map.getView().animate({
    center: [114.3694, 30.49],
    zoom: 13,
    duration: 1000,
  });
};

const logScope = (scope) => {
  // console.log(scope);
};
</script>

<style lang="scss" scoped></style>
